<template>
  <div class="comment-tab" @click.self="Check = 0">
    <p class="title">看帖是喜欢，评论才是真爱：</p>
    <p
      class="textarea"
      contenteditable="true"
      @focus="focus = 1"
      @blur="focus = 0"
      :class="{ borderColor: focus }"
      ref="text"
    ></p>
    <div class="tool">
      <ul>
        <li>
          <img
            :src="require(`@/assets/icon14${Check ? '_active' : ''}.svg`)"
            alt=""
            @click.self="CheckImg"
          />
          <div v-show="Check" class="bottom">
            <ul>
              <li v-for="n in 10" :key="n" @click="AddImg(`/biaoqing/biaoqing${n}.png`)">
                <img :src="`/biaoqing/biaoqing${n}.png`" alt="">
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <div class="btn" @click="sendMes">提交</div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    CheckImg() {
      this.Check = !this.Check;
    },
    AddImg(src){
      this.$refs.text.innerHTML+=`<img style="width:60px;margin-right:5px" src="${src}"/>`
    },
    sendMes(){
      this.Check=0
      let text =this.$refs.text.innerHTML
      let NowTime = 1659856609000||Date.now()
      // console.log('NowTime'.NowTime)
      this.$refs.text.innerHTML=''
      this.$emit('sendMessage',text,NowTime)
    },
  },
  data() {
    return {
      focus: 0,
      Check: 0,
    };
  },
};
</script>

<style scoped>
.comment-tab {
  box-sizing: border-box;
  margin-top: 20px;
  width: 100%;
  padding: 30px 50px;
  background: #fff;
  border-radius: 10px;
}
.title {
  margin-bottom: 16px;
  color: #999;
  font-size: 14px;
}
.textarea{
  box-sizing: border-box;
  width: 100%;
  padding: 10px 10px 20px 10px;
  border: 2px solid #999;
  min-height: 100px;
  max-height: 300px;
  outline: none;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 16px;
}
.textarea.borderColor {
  border-color: #1fbbf4;
}
.tool{
  display: flex;
  justify-content: space-between;
}
.tool>ul>li {
  width: 26px;
}
.tool>ul>li>img {
  width: 100%;
}
.tool>.btn{
  padding: 10px 20px;
  color: white;
  background: #1fbbf4;
  border-radius:10px ;
}
.bottom {
  background: #fff;
  position: absolute;
  width: 360px;
  height: 300px;
  border-radius: 10px;
  overflow: auto;
  border-left: 1px solid rgba(24, 24, 24, 0.1);
  box-shadow: 2px 2px 2px rgba(24, 24, 24, 0.1);
}
.bottom>ul{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  padding: 0 10px;
}
.bottom>ul>li{
  width: 60px;
  /* padding:5px; */
}
.bottom>ul>li>img{
  width: 100%;
}
</style>